<template>
  <div>
    <scroll-view scroll-y="true" scroll-with-animation="true" :style="{height:windowHeight+'px'}" :scroll-into-view="to_view" @scroll="scrollRightGoods">
      <a class="product-top-fix">{{top_fix_name}}</a>
      <div v-for="(item,index) in goods_list" :id="'a'+index" :key="index">
        <a class="product-top">{{item.name}}</a>
        <div class='content-list' v-for="(product,idx) in item.products" :key="idx">
          <div class='list-image-box'>
            <image class="list-image"
             src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imagediv2/2/w/200/h/200/q/90/format/jpeg"
             mode="aspectFit"
              ></image>
          </div>
          <div class='issue-name'>
            <div>{{product.title}}</div>
            <div style='margin-top:20px;color:#F05A86'>
              <span style='color:black'>
                ¥ {{product.original_price/100}}
              </span>

              <!-- <span v-if="product.promotion_price==0" style='color:black'>
                ¥ {{product.original_price/100}}
              </span>  -->

              <span v-if="product.vip_price!=0" style='color:red;font-size:14px;'>
                ¥ {{product.vip_price/100}}
                <span style='border-radius:5px;border:1px solid red;padding:0px 2px;font-size:10px;'>会员价</span>
              </span>

              <span class="iconfont icon-jiahao item-add" @click="addProduct(product,idx)"></span>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      windowHeight:0,
    }
  },
  computed: {
    ...mapGetters([
      'goods_list',
      'top_fix_name',
      'to_view',
      'active_index',
      'ranges',
    ])
  },
  methods: {
    ...mapActions([
      'setTopFixName',
      'setActiveIndex',
      'setCurrentProduct',
      'setSeasoningStatus'
    ]),
    async scrollRightGoods(e){
      let dis = e.target.scrollTop
      let index
      for(var i = 0; i < this.ranges.length; i++) {
        let item = this.ranges[i]
        if (0 <= dis && dis < this.ranges[0]) {
          this.setActiveIndex(0)
          index = 0
          break
        }
        else if (item.start <= dis && dis < item.end) {
          this.setActiveIndex(i)
          index = i
          break
        }
      }
      for (var i = 0; i < this.goods_list.length; i++) {
        if (index == i) {
          this.setTopFixName(this.goods_list[i].name)
        }
      }
    },
    addProduct(product,index){
      //当前选中的商品
      this.setCurrentProduct(product)
      this.setSeasoningStatus(true)
    },
  },
  beforeMount(){
    var self = this
    wx.getSystemInfo({
      success(res){
        self.windowHeight = res.windowHeight-55
      }
    })
  }
}
</script>

<style >
.product-top-fix{
  height: 30px;
  width: 100%;
  line-height: 30px;
  font-size: 13px;
  padding-left: 10px;
  background: #F9F9F9;
  position: fixed;
  top: 0;
}
.product-top{
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  padding-left: 10px;
  background: #F9F9F9;
}
.content-list{
  margin-left: 10px;
  height: 85px;
  display:flex;
  border-bottom: 1px solid #E3E3E3;
}
.list-image-box{
  width:70px;
  height:85px;
  vertical-align: middle;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.list-image{
  width:70px;
  height: 70px;
  vertical-align: middle;
  margin-top: 8px;
}
.issue-name{
  width:200px;
  font-size:17px;
  margin-top:10px;
  margin-left: 20px;
}
.item-add{
  font-size: 26px;
  color: #292929;
  float: right;
  padding-right: 15px;
}
</style>
